<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<link rel="stylesheet" type="text/css" href="css/idex.css"/>
	</head>
	<body>
		<div class="title">
			<p>未来五天天气预测</p>
		</div>
		<div class="box1">
			<ul class="ul1">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<div class="box2">
			<ul class="ul2">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<div class="img">
			<ul class="ul3">
				<li>
					<img src="" >
				</li>
				<li>
					<img src="" >
				</li>
				<li>
					<img src="" >
				</li>
				<li>
					<img src="" >
				</li>
				<li>
					<img src="" >
				</li>
			</ul>
		</div>
		<div class="max">
			<ul class="ul4">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<div class="windDirDay">
			<ul class="day">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<div class="">
			<ul class="day1">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<div class="min">
			<ul class="ul5">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<div class="windDirNight">
			<ul class="night">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<div class="">
			<ul class="night1">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<div class="img">
			<ul class="ul6">
				<li>
					<img src="" >
				</li>
				<li>
					<img src="" >
				</li>
				<li>
					<img src="" >
				</li>
				<li>
					<img src="" >
				</li>
				<li>
					<img src="" >
				</li>
			</ul>
		</div>
		<script src="//api.map.baidu.com/api?v=2.0&ak=FoqLnOGjt2BX25ZpdBIwnygG6h0jHrak"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script type="text/javascript">
			let geolocation = new BMap.Geolocation();
			geolocation.getCurrentPosition(function(r){
				if(this.getStatus() == BMAP_STATUS_SUCCESS){
					// let mk = new BMap.Marker(r.point);
					// map.addOverlay(mk);
					// map.panTo(r.point);
					// alert('您的位置：'+r.point.lng+','+r.point.lat);
					getWeatherByGeo(r.point.lng, r.point.lat)
				}else{
					alert('failed'+this.getStatus());
				}        
			},{enableHighAccuracy: true})
			
			function getWeatherByGeo(lng, lat){
				$.ajax({
					url: 'https://devapi.qweather.com/v7/weather/7d?',
					type: 'get',
					dataType: 'json',
					data: {
						location: `${lng},${lat}`,
						key: '92082599e33046d593a72d1c894fef54',	
					},
					success: function(res){
						for(var i=0;i<5;i++){
							$('.ul1 li').eq(i).html(res.daily[i].fxDate);
						}
							// $('.ul1 li').eq(0).html(res.daily[0].fxDate);
							// $('.ul1 li').eq(1).html(res.daily[1].fxDate);
							// $('.ul1 li').eq(2).html(res.daily[2].fxDate);
							// $('.ul1 li').eq(3).html(res.daily[3].fxDate);
							// $('.ul1 li').eq(4).html(res.daily[4].fxDate);
							for(var a=0;a<5;a++){
								$('.ul3 li img').eq(a).attr('src','img/'+res.daily[a].iconDay+'.png');
							}
							// $('.ul3 li img').eq(0).attr('src','img/'+res.daily[0].iconDay+'.png');
							// $('.ul3 li img').eq(1).attr('src','img/'+res.daily[1].iconDay+'.png');
							// $('.ul3 li img').eq(2).attr('src','img/'+res.daily[2].iconDay+'.png');
							// $('.ul3 li img').eq(3).attr('src','img/'+res.daily[3].iconDay+'.png');
							// $('.ul3 li img').eq(4).attr('src','img/'+res.daily[4].iconDay+'.png');
							for(var b=0;b<5;b++){
								$('.ul4 li').eq(b).html(res.daily[b].tempMax+'°');
							}
							// $('.ul4 li').eq(0).html(res.daily[0].tempMax+'°');
							// $('.ul4 li').eq(1).html(res.daily[1].tempMax+'°');
							// $('.ul4 li').eq(2).html(res.daily[2].tempMax+'°');
							// $('.ul4 li').eq(3).html(res.daily[3].tempMax+'°');
							// $('.ul4 li').eq(4).html(res.daily[4].tempMax+'°');
							for(var c = 0;c<5;c++){
								$('.day li').eq(c).html(res.daily[c].windDirDay);
							}
							// $('.day li').eq(0).html(res.daily[0].windDirDay);
							// $('.day li').eq(1).html(res.daily[1].windDirDay);
							// $('.day li').eq(2).html(res.daily[2].windDirDay);
							// $('.day li').eq(3).html(res.daily[3].windDirDay);
							// $('.day li').eq(4).html(res.daily[4].windDirDay);
							for(var d=0;d<5;d++){
								$('.night li').eq(d).html(res.daily[d].windDirNight);
							}
							// $('.night li').eq(0).html(res.daily[0].windDirNight);
							// $('.night li').eq(1).html(res.daily[1].windDirNight);
							// $('.night li').eq(2).html(res.daily[2].windDirNight);
							// $('.night li').eq(3).html(res.daily[3].windDirNight);
							// $('.night li').eq(4).html(res.daily[4].windDirNight);
							
							for(var e=0;e<5;e++){
								$('.ul5 li').eq(e).html(res.daily[e].tempMin+'°');
							}
							// $('.ul5 li').eq(0).html(res.daily[0].tempMin+'°');
							// $('.ul5 li').eq(1).html(res.daily[1].tempMin+'°');
							// $('.ul5 li').eq(2).html(res.daily[2].tempMin+'°');
							// $('.ul5 li').eq(3).html(res.daily[3].tempMin+'°');
							// $('.ul5 li').eq(4).html(res.daily[4].tempMin+'°');
							for(var f=0;f<5;f++){
								$('.ul6 li img').eq(f).attr('src','img/'+res.daily[f].iconNight+'.png');
							}
							// $('.ul6 li img').eq(0).attr('src','img/'+res.daily[0].iconNight+'.png');
							// $('.ul6 li img').eq(1).attr('src','img/'+res.daily[1].iconNight+'.png');
							// $('.ul6 li img').eq(2).attr('src','img/'+res.daily[2].iconNight+'.png');
							// $('.ul6 li img').eq(3).attr('src','img/'+res.daily[3].iconNight+'.png');
							// $('.ul6 li img').eq(4).attr('src','img/'+res.daily[4].iconNight+'.png');
							for(var g=0;g<5;g++){
								$('.day1 li').eq(g).html(res.daily[g].windScaleDay+'级');
							}
							// $('.day1 li').eq(0).html(res.daily[0].windScaleDay+'级');
							// $('.day1 li').eq(1).html(res.daily[1].windScaleDay+'级');
							// $('.day1 li').eq(2).html(res.daily[2].windScaleDay+'级');
							// $('.day1 li').eq(3).html(res.daily[3].windScaleDay+'级');
							// $('.day1 li').eq(4).html(res.daily[4].windScaleDay+'级');
							for(var h=0;h<5;h++){
								$('.night1 li').eq(h).html(res.daily[h].windScaleNight+'级');
							}
							// $('.night1 li').eq(0).html(res.daily[0].windScaleNight+'级');
							// $('.night1 li').eq(1).html(res.daily[1].windScaleNight+'级');
							// $('.night1 li').eq(2).html(res.daily[2].windScaleNight+'级');
							// $('.night1 li').eq(3).html(res.daily[3].windScaleNight+'级');
							// $('.night1 li').eq(4).html(res.daily[4].windScaleNight+'级');
							
							for(var i=0;i<5;i++){
								var a = new Date(res.daily[i].fxDate).getDay();
								switch(a){
									case 0:
										days = "星期天";
										break;
									case 1:
										days = "星期一";
										break;
									case 2:
										days = "星期二";
										break;
									case 3:
										days = "星期三";
										break;
									case 4:
										days = "星期四";
										break;
									case 5:
										days = "星期五";
										break;
									case 6:
										days = "星期六";
										break;
										
								}
								$('.ul2 li').eq(i).html(days);
								}
					}
				})
			}
			
			
			// $.ajax({
			// 	url:'https://devapi.qweather.com/v7/weather/7d?',
			// 	type:'get',
			// 	dataType:'json',
			// 	data:{
			// 		location :'101030100',
			// 		key:'92082599e33046d593a72d1c894fef54',
			// 	},
			// 	success:function(res){
			// 		$('.ul1 li').eq(0).html(res.daily[0].fxDate);
			// 		$('.ul1 li').eq(1).html(res.daily[1].fxDate);
			// 		$('.ul1 li').eq(2).html(res.daily[2].fxDate);
			// 		$('.ul1 li').eq(3).html(res.daily[3].fxDate);
			// 		$('.ul1 li').eq(4).html(res.daily[4].fxDate);
			// 		$('.ul3 li img').eq(0).attr('src','img/'+res.daily[0].iconDay+'.png');
			// 		$('.ul3 li img').eq(1).attr('src','img/'+res.daily[1].iconDay+'.png');
			// 		$('.ul3 li img').eq(2).attr('src','img/'+res.daily[2].iconDay+'.png');
			// 		$('.ul3 li img').eq(3).attr('src','img/'+res.daily[3].iconDay+'.png');
			// 		$('.ul3 li img').eq(4).attr('src','img/'+res.daily[4].iconDay+'.png');
			// 		$('.ul4 li').eq(0).html(res.daily[0].tempMax+'°');
			// 		$('.ul4 li').eq(1).html(res.daily[1].tempMax+'°');
			// 		$('.ul4 li').eq(2).html(res.daily[2].tempMax+'°');
			// 		$('.ul4 li').eq(3).html(res.daily[3].tempMax+'°');
			// 		$('.ul4 li').eq(4).html(res.daily[4].tempMax+'°');
					
			// 		$('.day li').eq(0).html(res.daily[0].windDirDay);
			// 		$('.day li').eq(1).html(res.daily[1].windDirDay);
			// 		$('.day li').eq(2).html(res.daily[2].windDirDay);
			// 		$('.day li').eq(3).html(res.daily[3].windDirDay);
			// 		$('.day li').eq(4).html(res.daily[4].windDirDay);
					
			// 		$('.night li').eq(0).html(res.daily[0].windDirNight);
			// 		$('.night li').eq(1).html(res.daily[1].windDirNight);
			// 		$('.night li').eq(2).html(res.daily[2].windDirNight);
			// 		$('.night li').eq(3).html(res.daily[3].windDirNight);
			// 		$('.night li').eq(4).html(res.daily[4].windDirNight);
					
			// 		$('.ul5 li').eq(0).html(res.daily[0].tempMin+'°');
			// 		$('.ul5 li').eq(1).html(res.daily[1].tempMin+'°');
			// 		$('.ul5 li').eq(2).html(res.daily[2].tempMin+'°');
			// 		$('.ul5 li').eq(3).html(res.daily[3].tempMin+'°');
			// 		$('.ul5 li').eq(4).html(res.daily[4].tempMin+'°');
					
			// 		$('.ul6 li img').eq(0).attr('src','img/'+res.daily[0].iconNight+'.png');
			// 		$('.ul6 li img').eq(1).attr('src','img/'+res.daily[1].iconNight+'.png');
			// 		$('.ul6 li img').eq(2).attr('src','img/'+res.daily[2].iconNight+'.png');
			// 		$('.ul6 li img').eq(3).attr('src','img/'+res.daily[3].iconNight+'.png');
			// 		$('.ul6 li img').eq(4).attr('src','img/'+res.daily[4].iconNight+'.png');
					
			// 		$('.day1 li').eq(0).html(res.daily[0].windScaleDay+'级');
			// 		$('.day1 li').eq(1).html(res.daily[1].windScaleDay+'级');
			// 		$('.day1 li').eq(2).html(res.daily[2].windScaleDay+'级');
			// 		$('.day1 li').eq(3).html(res.daily[3].windScaleDay+'级');
			// 		$('.day1 li').eq(4).html(res.daily[4].windScaleDay+'级');
					
			// 		$('.night1 li').eq(0).html(res.daily[0].windScaleNight+'级');
			// 		$('.night1 li').eq(1).html(res.daily[1].windScaleNight+'级');
			// 		$('.night1 li').eq(2).html(res.daily[2].windScaleNight+'级');
			// 		$('.night1 li').eq(3).html(res.daily[3].windScaleNight+'级');
			// 		$('.night1 li').eq(4).html(res.daily[4].windScaleNight+'级');
					
			// 		for(var i=0;i<5;i++){
			// 			var a = new Date(res.daily[i].fxDate).getDay();
			// 			switch(a){
			// 				case 0:
			// 					days = "星期天";
			// 					break;
			// 				case 1:
			// 					days = "星期一";
			// 					break;
			// 				case 2:
			// 					days = "星期二";
			// 					break;
			// 				case 3:
			// 					days = "星期三";
			// 					break;
			// 				case 4:
			// 					days = "星期四";
			// 					break;
			// 				case 5:
			// 					days = "星期五";
			// 					break;
			// 				case 6:
			// 					days = "星期六";
			// 					break;
								
			// 			}
			// 			$('.ul2 li').eq(i).html(days);
			// 			}
						
			// 	}
			// })
			
			
				// switch
			
			
			// var time1 = function(){
			// 	var date = new Date();
			// 	date1 = date.getDay();
			// 	return date1;
			// }
			// var time2 = function(){
			// 	var date = new Date();
			// 	date2 = date.getDay()+1;
			// 	return date2;
			// }
			// var time3 = function(){
			// 	var date = new Date();
			// 	date3 = date.getDay()+2;
			// 	return date3;
			// }
			// var time4 = function(){
			// 	var date = new Date();
			// 	date4 = date.getDay()+3;
			// 	return date4;
			// }
			// var time5 = function(){
			// 	var date = new Date();
			// 	date5 = date.getDay()+4;
			// 	return date5;
			// }
			
			
			// $('.ul2 li').eq(0).html("星期"+time1());
			// $('.ul2 li').eq(1).html("星期"+time2());
			// $('.ul2 li').eq(2).html("星期"+time3());
			// $('.ul2 li').eq(3).html("星期"+time4());
			// $('.ul2 li').eq(4).html("星期"+time5());
		</script>
	</body>
</html>
